<template>
  <view class="stock-table">
    <view class="list box" v-if="stockList.length">
      <view class="row table-head">
        <view class="nameArea col">转债</view>
        <view class="priceArea col">现价/涨幅</view>
        <view class="convert_value col">转股/溢价</view>
        <view class="stockInfo col">持仓</view>
        <view class="profitArea col">收益</view>
        <view class="operation col">操作</view>
      </view>
      <view class="row" v-for="(item, index) in stockList" :key="index" :class="{ needChange: item.is_danger }">
        <!-- 名字/代码 -->
        <view class="nameArea col">
          <view class="name">{{ item.name.replace('转债', '') }}</view>
          <view class="code">{{ item.bond_id }}</view>
        </view>
        <!-- 现价/涨跌幅 -->
        <view class="priceArea col" :style="[priceAreaStyle(item.increase_rt)]">
          <view class="price">{{ item.price }}</view>
          <view class="rate">{{ (item.increase_rt * 100).toFixed(2) }}%</view>
        </view>
        <!-- 转股价值/溢价率 -->
        <view class="value col">
          <view class="convert-value">
            {{ item.convert_value }}
          </view>
          <view class="premium-rt">
            {{ item.premium_rt }}
          </view>
        </view>
        <!-- 持仓成本及数量 -->
        <view class="stock col">
          <view class="purchase-price">
            {{ item.purchase_price }}
          </view>
          <view class="hold-quantity">
            {{ item.hold_quantity }}
          </view>
        </view>
        <!-- 收益 -->
        <view class="profitArea col" :style="[priceAreaStyle(item.increase_rt)]">
          <view class="profit">
            {{ item.profit }}
          </view>
          <view class="profit-rt"> {{ (item.profit_rt * 100).toFixed(2) }}% </view>
        </view>
        <!-- 操作 -->
        <view class="operate">
          <view class="operate" @click.native="toDelete(item)">卖出</view>
        </view>
      </view>
    </view>

    <view class="no-stock" v-else> 暂无数据 </view>
    <u-modal
      v-model="showOutForm"
      show-cancel-button
      border-radius="25"
      async-close
      width="640"
      height="400"
      @confirm="confirmSell"
    >
      <SellPopup :info="activeStock" />
    </u-modal>
  </view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('stock');

import { deleteStock } from '../_api/index.js';
import SellPopup from './SellPopup.vue';

export default {
  components: {
    SellPopup
  },
  data() {
    return {
      showOutForm: false,
      activeStock: {},
      sellNum: 1
    };
  },
  computed: {
    ...mapState(['stockList']),
    priceAreaStyle() {
      return increaseRatio => {
        if (increaseRatio > 0) {
          return {
            color: ' #ff9f96'
          };
        }
        if (increaseRatio < 0) {
          return {
            color: '#5ec3da'
          };
        }
        return {};
      };
    }
  },

  methods: {
    ...mapActions(['getStockListReq']),
    toDelete(item) {
      this.showOutForm = true;
      this.activeStock = item;
    },

    confirmSell() {
      if (!this.sellNum || !Number(this.sellNum)) {
        return uni.showToast({
          title: '请输入大于1的正整数'
        });
      }
      const data = {
        delete_info: [
          {
            id: this.activeStock.id,
            num: this.sellNum
          }
        ]
      };
      // 调用删除持仓的接口
      deleteStock(data)
        .then(() => {
          uni.showToast({
            title: '操作成功!'
          });
          setTimeout(() => {
            this.showOutForm = false;
            this.getStockListReq();
          }, 1500);
        })
        .catch(_ => {});
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(~@/common/style.css);

.stock-table {
  width: 690rpx;
  margin: 10rpx auto;
}
.navigator {
  display: inline-block;
  color: blue;
}
.operate {
  color: blue;
}
.no-stock {
  padding: 25rpx;
  text-align: center;
  font-size: 30rpx;
}

.input {
  width: 50rpx;
  border-bottom: 2rpx solid #000;
}
</style>
